<style include="cr-shared-style">
  cr-checkbox {
    display: flex;
    padding: 10px 8px;
  }

  .checkbox-label {
    color: var(--google-grey-800);
  }

  settings-avatar-icon {
    height: 20px;
    margin-inline-end: 16px;
    width: 20px;
  }

  .cr-row {
    padding: 0;
  }
</style>
<cr-dialog id="dialog" close-text="$i18n{close}">
  <div slot="title">$i18n{passwordRemoveDialogTitle}</div>
  <div slot="body">
    <div inner-h-t-m-l="[[getDialogBodyMessage_()]]"></div>
    <cr-checkbox checked="{{removeFromAccountChecked_}}"
        id="removeFromAccountCheckbox">
      <div class="cr-row first">
        <settings-avatar-icon></settings-avatar-icon>
        <div class="checkbox-label">
          $i18n{passwordRemoveDialogFromAccountCheckboxLabel}
        </div>
        <div class="cr-secondary-text">
          &nbsp([[accountEmail_]])
        </div>
      </div>
    </cr-checkbox>
    <cr-checkbox checked="{{removeFromDeviceChecked_}}"
        id="removeFromDeviceCheckbox">
      <div class="checkbox-label">
        $i18n{passwordRemoveDialogFromDeviceCheckboxLabel}
      </div>
    </cr-checkbox>
  </div>
  <div slot="button-container">
    <cr-button class="cancel-button" id="cancelButton"
        on-click="onCancelButtonClick_">
      $i18n{passwordRemoveDialogCancelButtonText}
    </cr-button>
    <cr-button class="action-button" id="removeButton"
        disabled="[[shouldDisableRemoveButton_(removeFromAccountChecked_,
            removeFromDeviceChecked_)]]"
        on-click="onRemoveButtonClick_">
      $i18n{passwordRemoveDialogRemoveButtonText}
    </cr-button>
  </div>
</cr-dialog>
